<script setup lang="ts">

import Logo from "@/Components/Logo.vue";
import {ref} from "vue";


function tab0(){
  let tab=0;
  this.$emit('tabListener',tab);
  console.log(tab)
}
function tab2(){
  let tab=2;
  this.$emit('tabListener',tab);
  console.log(tab)
}
</script>

<template>
  <div class=" left-list   z-8 w-50 h-full lg:w-60 xl:w-70   bg-[#dae6e6]  pb-50">
    <Logo></Logo>


    <div class="online-music flex flex-col gap-2 justify-start mt-6 ml-10 mr-8">
      <img src="../img/t-在线音乐.png" class=" h-5 w-34">
      <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center "
          @click="tab0" :class="{tab_active:tab==0}"
      >
        <img src="../img/推荐.png" class="h-12">
        <img src="../img/t-推荐.png" class="h-5.5">
      </div>
      <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center  ml--2 ">
        <img src="../img/音乐馆.png" class="h-12">
        <img src="../img/t-音乐馆.png" class="h-5.5">
      </div>
    </div>

    <div class="my-music flex flex-col gap-2 justify-start mt-6 ml-10 mr-8">
      <img src="../img/t-我的音乐.png" class=" h-5 w-34">
      <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center"
           @click="tab2" :class="{tab_active:tab==2}"
      >
        <img src="../img/我喜欢.png" class="h-12">
        <img src="../img/t-我喜欢.png" class="h-5.5">
      </div>
      <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center">
        <img src="../img/最近播放.png" class="h-12">
        <img src="../img/t-最近播放.png" class="h-5.5">
      </div>
    </div>

    <div class="music-play flex flex-col gap-2 justify-start mt-6 ml-10 mr-8">
      <img src="../img/t-音乐乐园.png" class=" h-5 w-34">
      <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center">
        <img src="../img/游戏.png" class="h-12">
        <img src="../img/t-游戏.png" class="h-5.5">
      </div>
      <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center">
        <img src="../img/音乐探索.png" class="h-12 w-13">
        <img src="../img/t-音乐探索.png" class="h-5.5">
      </div>
      <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center">
        <img src="../img/音乐成就.png" class="h-12">
        <img src="../img/t-音乐成就.png" class="h-5.5">
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>